import React, { useState } from 'react';
import {
  PauseCircleOutlined,
  DownOutlined,
  SmileOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, theme, Dropdown, Space, Flex } from 'antd';
import MyMenu from '../components/MyMenu';
import { Outlet, useNavigate } from "react-router-dom"
import MyTabs from '../components/MyTabs';
const { Header, Content, Footer, Sider } = Layout;


const Home = () => {
  //定义了一个状态 collapsed=false
  const [collapsed, setCollapsed] = useState(false);
  const [username, setUsername] = useState("xiaofeifei")
  const navigate = useNavigate()
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const loginout = () => {
    localStorage.removeItem("token")
    localStorage.removeItem("userInfo")
    // navigate("/login",{replace:true})
    window.location.href = "/login"
  }


  // items用于下拉菜单显示数据
  const items = [
    {
      key: '1',
      label: (
        <span>修改密码</span>
      ),
    },
    {
      key: '2',
      label: (
        <span onClick={loginout}>退出登录</span>
      ),
    },
  ]
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div style={{ padding: "10px", overflow: "hidden" }} className="demo-logo-vertical">
          <img width="180px" src="http://web.woniulab.com:8084/img/logo-250px.645f24b5.png" alt="" />
        </div>
        <MyMenu></MyMenu>
      </Sider>

      <Layout>
        <Header
          style={{
            paddingRight: 20,
            background: colorBgContainer,
            display: 'flex',
            justifyContent: 'flex-end'
          }}
        >
          <Dropdown
            menu={{
              items,
            }}
          >
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                {username}
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>
        </Header>
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
            }}
          >
            <MyTabs></MyTabs>
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2023 Created by Ant UED <PauseCircleOutlined />
        </Footer>
      </Layout>
    </Layout>
  );
};
export default Home;